<template>
  <div>
    <el-dialog title="修改别名" v-model="isUpdateName" width="30%">
      <el-input v-model="changeRow!.name" size="default" clearable></el-input>
      <template #footer>
        <span>
          <el-button @click="isUpdateName = false">取消</el-button>
          <el-button type="primary" @click="updateAliasName">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <el-card
      shadow="always"
      style="margin: 2px 5px"
      :body-style="{
        padding: '20px',
        height: 'calc(100vh - 170px)',
        'overflow-y': 'auto',
      }"
    >
      <template #header>
        <el-row>
          <el-col :span="12" :offset="0">
            <el-radio-group v-model="filterType" size="default">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="web" />
              <el-radio-button label="api" />
            </el-radio-group>
          </el-col>
          <el-col :span="4" :offset="8">
            <el-input
              v-model="searchText"
              placeholder="输入内容进行搜索"
              size="default"
              clearable
              :suffix-icon="Search"
            >
              <template #prepend>
                <el-button
                  type="primary"
                  bg
                  size="default"
                  :icon="Search"
                ></el-button>
              </template>
            </el-input>
          </el-col>
        </el-row>
      </template>

      <el-table :data="showKeywordsList" border stripe max-height="600">
        <el-table-column label="关键字" prop="keywords" min-width="120px" />

        <el-table-column label="用法" prop="keyUsage" min-width="300px" />
        <el-table-column label="详细说明" type="expand" width="100px">
          <template #default="{ row }">
            <div class="desc-wrapper">
              <span style="font-size: larger; font-weight: bold">详细说明</span>
              <div v-html="row.description"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="别名" prop="name" min-width="120px" />
        <el-table-column label="修改别名" width="100px">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="default"
              @click="
                isUpdateName = true;
                changeRow = { ...row };
              "
              >修改别名</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 10px"
        background
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50]"
        layout="total,prev,sizes, pager, next,jumper"
        :total="filterKeywordsList.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { updateKeywordsApi } from "@/api/sunnykeywords";
import type { Keywords } from "@/types/sunnyKeywords/type";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { ref, onMounted, computed } from "vue";

import { useKeywordsStore } from "@/stores/keywordsStore";

const keywordsStore = useKeywordsStore();
// let originKeywordsList = ref<Keywords[]>([]);

let filterKeywordsList = computed(() => {
  let typeKeywords = keywordsStore.originKeywordsList
    .filter((keywords) => {
      //如果filtertype是all的话，就不用做判断了，任何关键字遍历的时候都是为true的，否则判断类型是否为过滤类型。
      return filterType.value === "all" || keywords.type === filterType.value;
    })
    //根据搜索内容再次过滤
    .filter((keyword) => {
      return (
        keyword.keywords.indexOf(searchText.value) !== -1 ||
        keyword.name.indexOf(searchText.value) !== -1 ||
        keyword.keyUsage.indexOf(searchText.value) !== -1
      );
    });
  return typeKeywords;
});

//类型过滤
const filterType = ref("all");
//搜索字段
const searchText = ref("");

//分页功能
let currentPage = ref(1);
let pageSize = ref(10);
function handleSizeChange(size: number) {
  pageSize.value = size;
}

const handleCurrentChange = (cp: number) => {
  currentPage.value = cp;
};

let showKeywordsList = computed(() => {
  //分页实际上就是算出来当前列表中，下标为多少范围的数据需要展示
  //第1页   下标0-9  第2页 10-19    // 20页第1页   下标 0-19
  let startIndex = (currentPage.value - 1) * pageSize.value;
  let endIndex = currentPage.value * pageSize.value - 1;

  let index = -1;
  let currentPageData = filterKeywordsList.value.filter((keywords) => {
    index += 1;
    return index <= endIndex && index >= startIndex;
  });
  return currentPageData;
});

onMounted(() => {
  keywordsStore.listKeywords();
});

let isUpdateName = ref(false);
let changeRow = ref<Keywords>();

function updateAliasName() {
  ElMessage.info(JSON.stringify(changeRow.value));
  isUpdateName.value = false;
  updateKeywordsApi(changeRow.value!).then(({ data }) => {
    ElMessage.success(data);
    keywordsStore.listKeywords();
  });
}
</script>

<style scoped>
.desc-wrapper {
  padding: 5px 20px;
}
</style>
